<template>
  <div style="width: 100%; display: flex; align-items: center;">
    <div style="flex: 1"  class="viewCardBorder" @click="switchCard">
      asd
      <ScrollCard>
        <!-- <div
        v-for="(item, index) in QSdata"
        :key="item.id"
        class="view-card"
        :class="{'top': index === currentIndex}"
        :data-index="index"
        v-show="index === currentIndex"
        >
        <swiper-slide>Slide 1
            <template #header>
                <div>
                    <div class="card-title">{{ item.title }}</div>
                </div>
            </template>
            <template #content>
                <el-radio-group v-model="radio1">
                    <div v-for="option in item.options" class="options">
                        <el-radio :value="option.value" size="large">{{option.title}}</el-radio>
                    </div>
                </el-radio-group>
            </template>
        </swiper-slide>
        </div> -->
      </ScrollCard>
      <!-- <div
          v-for="(item, index) in QSdata"
          :key="item.id"
          class="view-card"
          :class="{'top': index === currentIndex}"
          :data-index="index"
          v-show="index === currentIndex"
          >
          <ViewCard :data="item">
              <template #header>
                  <div class="card-title">{{ item.title }}</div>
              </template>
              <template #content>
                  <div class = "optionsBorder">
                  <el-radio-group v-model="radio1">
                      <div v-for="option in item.options" class="options">
                          <el-radio :value="option.value" size="large">{{option.title}}</el-radio>
                      </div>
                  </el-radio-group>

                  </div>

              </template>
          </ViewCard>

      </div> -->
    </div>

  </div>
</template>

<script>
import {QSdata} from '../mockData/traveQS';
import ViewCard from '../components/ViewCard.vue';
import ScrollCard from '../components/ScrollCard.vue'

export default {
  name: 'Home',
  components: {
    ViewCard,
    ScrollCard
  },
  data() {
    return {
      QSdata: QSdata,
      currentIndex: 0,
    }
  },
  methods: {
    switchCard(event) {
      const clickedCard = event.target.closest('.view-card');
      if (clickedCard) {
        const index = parseInt(clickedCard.getAttribute('data-index'), 10);
        if (index === this.currentIndex) {
          this.currentIndex = (this.currentIndex + 1) % this.QSdata.length;
        }
      }
    },
  },
  mounted() {
    console.log('QSdata', QSdata);
  }
};
</script>
<style lang="scss">
.viewCardBorder {

}
</style>